<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>搜索</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type="text/javascript" src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type="text/javascript" src='../js/libs/sui/sm.js' charset='utf-8'></script>
    <script type="text/javascript" src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="../js/libs/juicer-min.js"></script>
    <script type="text/javascript" src="../js/libs/jquery.md5.js"></script>
    <script type="text/javascript" src="../js/api.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
</head>
<body>

<div id="pageContent" class="content train-search bg-default">
    <!--搜索栏-->
    <div class="row no-gutter search-head bg-theme c-white">
        <div class="col-10">
            <i class="icon iconfont p-l c-white"  onclick="javascript:closeWin();">&#xe61f;</i>
        </div>
        <div class="col-90 right">
            <div class="searchbar row no-gutter">
                <div class="search-input col-85">
                    <label class="icon iconfont" for="search">&#xe60e;</label>
                    <input type="search" id='search' placeholder='输入关键字...'/>
                </div>
                <a id="search-key" class="button button-fill t-right col-15 c-white">搜索</a>
            </div>
        </div>
    </div>
    <!--搜索内容-->
    <div id="search-list" class="train-card">
        <p class="t-center w-100p f-time c-gray">搜索结果 ...</p>
       <!-- <div class="item">
            <a load="public/pag../course.html" class="item-link item-content external" title="最新资讯" progress="false">
                <img class="px-img" src="public/images/lunbo.jpg" width="50%" alt=""/>
                <div class="p-5">
                    <p class="c-default">android基础培训</p>
                    <div class="justfy">
                    <span>
                        <i class="iconfont icon ">&#xe60f;</i>4个月课程
                    </span>
                    <span class="c-beau-green">
                       ￥5600
                    </span>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a load="public/pag../course.html" class="item-link item-content external" title="最新资讯" progress="false">
                <img class="px-img" src="public/images/lunbo.jpg" width="50%" alt=""/>
                <div class="p-5">
                    <p class="c-default">android基础培训</p>
                    <div class="justfy">
                    <span>
                        <i class="iconfont icon ">&#xe60f;</i>4个月课程
                    </span>
                    <span class="c-beau-green">
                       ￥5600
                    </span>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a load="public/pag../course.html" class="item-link item-content external" title="最新资讯" progress="false">
                <img class="px-img" src="public/images/lunbo.jpg" width="50%" alt=""/>
                <div class="p-5">
                    <p class="c-default">android基础培训</p>
                    <div class="justfy">
                    <span>
                        <i class="iconfont icon ">&#xe60f;</i>4个月课程
                    </span>
                    <span class="c-beau-green">
                       ￥5600
                    </span>
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a load="public/pag../course.html" class="item-link item-content external" title="最新资讯" progress="false">
                <img class="px-img" src="public/images/lunbo.jpg" width="50%" alt=""/>
                <div class="p-5">
                    <p class="c-default">android基础培训</p>
                    <div class="justfy">
                    <span>
                        <i class="iconfont icon ">&#xe60f;</i>4个月课程
                    </span>
                    <span class="c-beau-green">
                       ￥5600
                    </span>
                    </div>
                </div>
            </a>
        </div>-->
    </div>
</div>

<!-- 搜索列表展示 -->
<script id="search-course-list" type="text/template">
    {@each courseList as it, index}
    <div class="item">
        <a load="public/pag../course.html" data-class-type-id="&{it.CLASS_TYPE_ID}" class="item-link item-content external ct-main-course" title="最新资讯" progress="false">
            <img class="px-img" src="&{url}&{it.CLASS_TYPE_PIC}" width="50%" alt=""/>
            <div class="p-5">
                <p class="c-default">&{it.CLASS_TYPE_NAME}</p>
                <div class="justfy">
                    <span class="">
                        <i class="iconfont icon ">&#xe60f;</i> &{num[index]}个月课程
                    </span>
                    <span class="c-red">
                        ￥&{price[index]}元
                    </span>
                </div>
            </div>
        </a>
    </div>
    {@/each}
</script>


<script type="text/javascript">
    apiready = function() {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });


        $("#search-key").on("click", function () {
            var searchValue = $("#search").val();

            var sql = "select * from b_class_type where CLASS_TYPE_NAME like '%{0}%'";
            if (isNotEmpty(searchValue)) {
                sql = sql.format(searchValue);

                dbQuery(1, 10, sql, true, function (ret, err) {
                    if (ret.statusCode == 0) {
                        var arr = [];
                        var sb = [];
                        $.each(ret.result, function (index, ems) {
                            var num = (new Date(ems.END_DATE).getTime() - new Date(ems.BEGIN_DATE).getTime()) / (30 * 24 * 60 * 60 * 1000);
                            arr.push(parseInt(num));
                            if (ems.SCALE_FLAG != null && ems.SCALE_FLAG != "" && ems.ENABLED_FLAG != "" && ems.ENABLED_FLAG != null && ems.ENABLED_FLAG == 1) {
                                sb.push(ems.STD_FEE * ems.SCALE_FLAG);
                            } else {
                                sb.push(ems.STD_FEE);
                            }
                        });

                        var courseData = {
                            courseList: ret.result,
                            url: getUrl(),
                            num: arr,
                            price: sb
                        };
                        var courseNode = document.getElementById('search-course-list').innerHTML;
                        var courseHtml = juicer(courseNode, courseData);
                        $("#search-list").html(courseHtml);
                    }
                });
            } else {
                toast("请输入搜索班级类型");
            }
        });
    };

    $("#search-list").on("click", ".ct-main-course", function() {

        var $this = $(this);
        var classTypeId = $this.data("classTypeId");

        openWin("course", "course.html", {
            classTypeId: classTypeId
        });

    });

</script>

</body>
</html>